<template>
    <!-- 功能
        1.点击后，铺满屏幕
    -->
   <div class="pop">

        <!-- 内容区域 -->
        <div class="content" >
            <div class="content-header w-flex3">
                <div class="title">主题</div>
                <div class="del-icon" @click="deletes">x</div>
            </div>
            <div class="content-list">
                <div class="list-item w-flex3" v-for="(item,index) in themeColor" :key="index">
                    <div>{{ item.name }}</div>
                    <div>
                        <div v-if="!item.is" class="Active" @click="isChange(index,item.color)" >使用</div>
                        <div v-else class="isActive" >激活</div>
                    </div>
                </div>
            </div>
        </div>
     
   </div>
</template>

<script setup lang="ts">
    import {ref} from 'vue'
    import { useStore } from 'vuex';
    let store = useStore()
   
    let themeColor = ref([
        {name:'黑色',is:true,color:'black'},
        {name:'橙色',is:false,color:'orange'},
        {name:'紫色',is:false,color:'purple'},
        {name:'fen色',is:false,color:'pink'},
        {name:'天蓝',is:false,color:'skyblue'},
    ])

    const isChange =(index:number,val:string)=>{
        // 根据索引找到数组中的一项，修改数据,  其他的变成false  changeTheme       
        themeColor.value.forEach((item,idx)=>{
            if(index==idx){
                themeColor.value[index].is = !themeColor.value[index].is
            }else{
                themeColor.value[idx].is = false
            }
        })        
         // 将数据保存到vuex中
    
    // 1.先到vuex中定义这个数据
    // 2.给vuex中的数据赋值

    store.commit('layout/changeTheme',val)
    }  

    // 我这个组件的显示和隐藏 =》 在父级组件中处理
    // 子组件向父组件传递数据
    let emits =  defineEmits(['deletePop'])  // defineEmits('需要传递的数据名')
    const deletes = ()=>{
        emits('deletePop')  // 传递 到父组件
    }

</script>

<style scoped lang="scss">
.pop{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: .7;
    z-index: 98;
    .content{
        z-index: 999;
        width: 40%;
        background-color: #fff;
        // opacity: 1;
        padding: 18px 10px;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        .title{
            padding-left: 300px;
        }
        .del-icon{
            color: red;            
            padding: 10px 15px;
        }
        .del-icon:hover{
            background-color: pink;
            border-radius: 5px;
        }

        .content-list{
            margin: 10px 0;
            .list-item{

                padding: 10px 10px;
                .isActive{
                    color: #fff;
                    background: blue;
                    padding: 5px 10px;
                    border-radius: 20%;
                }
                .Active{
                    padding: 5px 10px;
                    border-radius: 20%;
                }
            }
            .list-item:hover{
                background: #ccc;
            }

        }
    }

}
</style>